<script setup lang="ts">
import {onMounted, ref} from 'vue'
import TnIcon from "@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue";
import {merchantReviewsListApi} from "@/api/message";
import NoData from "@/composables/noData/NoData.vue";

type EvaluateItem = {
  headSculpture: string;
  nickname: string;
  title: string;
  content: string;
  badReviewType: string;
  tagClass: string;
  projectEndTime: string;
}

/**
 * 评价列表获取
 */
const list = ref<Array<EvaluateItem>>([])
const search = async () => {
  const res = await merchantReviewsListApi();
  list.value = res?.data || [];
}

const toPage = (id: string) => {
  uni.navigateTo({
    url: `/pages/trade/tradeDetail/index?id=${id}`
  })
}

onMounted(() => {
  search();
})
</script>

<template>
  <view>
    <scroll-view v-if="list.length > 0">
      <view class="comment-list">
        <view v-for="(item, index) in list" :key="index">

          <view class="time-text">
            完成时间：{{ item.projectEndTime }}
          </view>
          <view class="comment-card" >
            <view style="display: flex; align-items: center; justify-content: space-between;">
              <view class="comment-user">
                <image :src="item.headSculpture" class="avatar" />
                <view class="username">
                  <view>
                    {{ item.nickname }}
                  </view>
                  <view class="username-desc">{{item.title}}</view>
                </view>
              </view>
              <view class="comment-time">
                <text class="order-detail" @click="toPage(item.projectId)">
                  订单详情
                  <TnIcon name="right" />
                </text>
              </view>
            </view>

            <view class="content-box">
              <view v-if="item.ratingLevel === 1">
                <text style="font-size: 16px">😊</text>
                <text class="tag-good">好评</text>
              </view>
              <view v-if="item.ratingLevel === 2">
                <text style="font-size: 16px">😐</text>
                <text class="tag-bad">中评</text>
              </view>
              <view v-if="item.ratingLevel === 3">
                <text style="font-size: 16px">😔</text>
                <text class="tag-bad">差评</text>
              </view>
              <view class="comment-tag" :class="item.tagClass">
                {{ item.badReviewType }}
              </view>

              <view class="comment-content">
                {{ item.content }}
              </view>
            </view>
          </view>
        </view>

      </view>
    </scroll-view>
    <view v-else>
      <no-data message="暂无评价"></no-data>
    </view>
  </view>
</template>

<style scoped lang="scss">
.comment-list {
  padding: 20rpx;
  .time-text {
    color: #999999;
    font-size: 12px;
    margin-bottom: 7px;
    margin-top: 3px;
  }
}

.comment-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  .content-box {
    background: #FAFAFA;
    margin-top: 12px;
    padding: 10px;
    border-radius: 5px;
  }
}

.comment-time {
  font-size: 24rpx;
  color: #999;

}

.comment-user {
  display: flex;
  align-items: center;

  .avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .username {
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
    .username-desc {
      color: #999999;
      font-size: 12px;
      margin-top: 3px;
    }
  }
}

.comment-tag {
  display: inline-block;
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 999rpx;
  margin-bottom: 16rpx;
}
.tag-good {
  //background-color: #fff8e5;
  color: #FFB215;
  font-size: 15px;
}

.tag-bad {
  //background-color: #ffeef0;
  color: #FF733B;
  font-size: 15px;
}

.comment-content {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.5;
}
</style>